<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实战案例</title>
    <script src="js/my.js"></script>
    <script>
        //1. 全选，全不选
        function selectAll(v) {
            //1.1 得到页面中所有name属性为 habby的元素
            let habbies = HZ.SA("input[name='habby']")
            //1.2 遍历这个元素
            for (const key in habbies) {
                habbies[key].checked = v
            }
        }
        //2. 反选
        function reverseAll() {
            //2.1 得到页面中所有name属性为 habby的元素
            let habbies = HZ.SA("input[name='habby']")
            //2.2 反选
            for (const key in habbies) {
                // if(habbies[key].checked){
                //     habbies[key].checked = false
                // }else{
                //     habbies[key].checked = true
                // }
                //可以简化为：
                habbies[key].checked = !habbies[key].checked
            }
        }
        //3. 查看选择
        function findSelect(){
            //3.1 得到页面中所有name属性为 habby的元素
            let habbies = HZ.SA("input[name='habby']")
            //3.2 定义选择的爱好字符串
            let str = "你的爱好是：<br>"
            //3.3 遍历伪数组
            for (const key in habbies) {
                if(habbies[key].checked){
                    str += habbies[key].value + " "
                }
            }
            //3.4 将str设置给层d
            HZ.S("#d").innerHTML = str
        }
    </script>
</head>
<body>
    请选择你的爱好：<br>
    <input type="checkbox" name="habby" value="唱歌">唱歌 <br>
    <input type="checkbox" name="habby" value="跳舞">跳舞 <br>
    <input type="checkbox" name="habby" value="下棋">下棋 <br>
    <input type="checkbox" name="habby" value="打牌">打牌 <br>
    <input type="checkbox" name="habby" value="游泳">游泳 <br>
    <input type="button" value="全选" onclick="selectAll(true)">
    <input type="button" value="全不选" onclick="selectAll(false)">
    <input type="button" value="反选" onclick="reverseAll()">
    <input type="button" value="查看选择" onclick="findSelect()">
    <div id="d"></div>
</body>
</html>